<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="/lib/react.js"></script>
  <script src="/lib/react-dom.js"></script>
  <script src="/lib/babel.js"></script>
  <script type="text/babel">
    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          count: 100,
        };
      }

      // 方式二 这样箭头函数的this会被挂载到App上面
      add = () => {
        console.log(this);
        this.setState({
          count: this.state.count + 1,
        });
      };

      // 方式三
      reduce() {
        this.setState({
          count: this.state.count - 1,
        });
      }

      render() {
        return (
          <div>
            <div>{this.state.count}</div>
            <button onClick={this.add}>+</button>
            {/*方式三  用的最多的方式*/}
            <button onClick={() => this.reduce()}>-</button>
          </div>
        );
      }
    }

    const rootEl = document.querySelector("#root");
    const root = ReactDOM.createRoot(rootEl);
    root.render(<App />);
  </script>
</html>
